<div class="row">
	<div class="well span6" id="listaProductoForm">
		<h4>Listado de Productos</h4>
		<hr>
		<div id="resultado" data-bind="visible: mostrarError" class="alert alert-error" style="display: none;">
			<h4 class="alert-heading">Problema al obtener los productos.</h4>
			<span data-bind="html: mensajeError"></span>
		</div>	
		<table data-bind="visible: !mostrarError()" class="table table-striped table-bordered">
			<thead class="table-condensed">
				<tr>
					<th colspan="4" class="alert alert-info">Filtrar por:</th>
				</tr>
			</thead>
			<thead class="table-condensed">
				<tr>
					<td><input type="text" class="input-small" data-bind="value: filtroId, valueUpdate:'afterkeydown'" placeholder="Id" /></td>
					<td><input type="text" class="input-medium" data-bind="value: filtroDescripcion, valueUpdate:'afterkeydown'" placeholder="Descripcion" /></td>
					<td colspan="2"><select id="selectSubgrupo" data-bind="options: subgrupos, optionsText: 'descripcion', optionsValue: 'descripcion', value: filtroSubgrupo" class="input-large"></select></td>
				</tr>
			</thead>
			<thead>
				<tr>
					<th>ID</th>
					<th>Descripcion</th>
					<th>Subgrupo</th>
					<th data-bind="visible: isAdmin">Acciones</th>
				</tr>
			</thead>
			<tbody data-bind="visible: cargando()">
				<tr>
					<td colspan="4">Cargando <i class="icon-refresh"></i></td>
				</tr>
			</tbody>
			<tbody data-bind="visible: productos().length == 0 && !cargando()">
				<tr class="alert alert-info">
					<td colspan="4">No hay productos en el sistema.</td>
				</tr>
			</tbody>		
			<tbody data-bind="foreach: productosFiltrados(), visible: productosFiltrados().length > 0 && !cargando()">
				<tr>
					<td data-bind="text: id"></td>
					<td data-bind="text: descripcion"></td>
					<td data-bind="text: subgrupo"></td>
					<td data-bind="visible: $parent.isAdmin">
						<a href="#" data-bind="click: $root.editar" title="Editar"><i class="icon-edit"></i></a> 
					</td>
				</tr>
			</tbody>
			<tfoot class="table-condensed">
				<tr class="label">
					<td>
						<a href="#" data-bind="click: primero" title="Primero" class="btn"><i class="icon-step-backward"></i></a>&nbsp;&nbsp;
						<a href="#" data-bind="click: anterior" title="Anterior" class="btn"><i class="icon-backward"></i></a>
					</td>
					<td colspan="2">&nbsp;</td>
					<td>
						<a href="#" data-bind="click: siguiente" title="Siguiente" class="btn"><i class="icon-forward"></i></a>&nbsp;&nbsp;
						<a href="#" data-bind="click: ultimo" title="Ultimo" class="btn"><i class="icon-step-forward"></i></a>
					</td>
				</tr>
			</tfoot>
		</table>
		<div class="form-actions" style="text-align:right ">
			<button id="nuevo" class="btn btn-primary" data-bind="visible: isAdmin, click: nuevo, enable: !mostrarError()">Agregar</button>
			<button id="volver" class="btn" data-bind="click: volver">Volver</button>
		</div>
	</div>
</div>
<script language="javascript">
	function ListaProducto() {
		var self = this;

		self.paginaActual = ko.observable(1);
		self.paginas = ko.observable();
		self.filtroId = ko.observable();
		self.filtroDescripcion = ko.observable();
		self.filtroSubgrupo = ko.observable();
		self.subgrupos = ko.observableArray();
		var todos = {};
		todos.descripcion = "Todos";
		self.subgrupos().push(todos);
		sterilav.cargaListas(self.subgrupos(), "Subgrupos");

		self.productos = ko.observableArray();
		self.productosFiltrados = ko.computed(function() {
			var filtroDescripcion = "";
			var filtroId = "";
			var filtroSubgrupo = "";
			if(self.filtroDescripcion()) {
				filtroDescripcion = self.filtroDescripcion();
			}
			if(self.filtroId()) {
				filtroId = self.filtroId();
			}
			if(self.filtroSubgrupo() && self.filtroSubgrupo()!="Todos") {
				filtroSubgrupo = self.filtroSubgrupo();
			}
			return ko.utils.arrayFilter(self.productos(), function(item) {
				var esDescripcion = (item.descripcion.toLowerCase().indexOf(filtroDescripcion.toLowerCase())>-1);
				var esId = (item.id.toLowerCase().indexOf(filtroId.toLowerCase())>-1);
				var esSubgrupo = (item.subgrupo.toLowerCase().indexOf(filtroSubgrupo.toLowerCase())>-1);
				
				return esDescripcion && esId && esSubgrupo;
			});
		});
		self.cargando = ko.observable(true);
		self.mostrarError = ko.observable(false);
		self.mensajeError = ko.observable("Hubo un problema al buscar los Productos.");
		self.isAdmin = ko.computed(function() {
			return amplify.store.sessionStorage("sterilav.perfilLogueado") == "1";
		});

		self.primero = function() {
			self.paginaActual(1);
			self.cargar();
		};

		self.anterior = function() {
			if(self.paginaActual() > 1) {
				self.paginaActual(self.paginaActual() - 1);
				self.cargar();
			}
		};
		
		self.siguiente = function() {
			if(self.paginaActual() < self.paginas()) {
				self.paginaActual(self.paginaActual() + 1);
				self.cargar();
			}
		};

		self.ultimo = function() {
			self.paginaActual(self.paginas());
			self.cargar();
		};
		
		self.cargar = function() {
			self.productos.removeAll();
			var exito = function(data) {
				if(data.status != "OK") {
					self.mensajeError(data.data);
					self.mostrarError(true);
					return;
				}
				self.paginas(data.paginas);
				self.cargando(false);
				for(i=0; i<data.data.length;i++) {
					var newProducto = new Producto();
					newProducto.id = data.data[i].id;
					newProducto.descripcion = data.data[i].descripcion;
					newProducto.subgrupo = data.data[i].subgrupo;
					self.productos.push(newProducto);
				}
			};
			var falla = function(data) {
				self.cargando(false);
				if (data) {
					self.mensajeError(data.responseText);
				}
				self.mostrarError(true);
			};		
			$.ajax({
				url:"./servidor/sterilav.php?op=listaProductos&pagina=" + self.paginaActual(),
				success:exito,
				error:falla,
				type:"GET",
				dataType:"json"
			});
		};

		self.volver = function() {
			window.location.href = "./Index.html";
		};
		
		self.nuevo = function() {
			amplify.store.sessionStorage("sterilav.productoEditado", null);
			$("#container").load("./cliente/paginas/producto.html");		
		};
		
		self.editar = function(producto) {
			amplify.store.sessionStorage("sterilav.productoEditado", producto.id);
			$("#container").load("./cliente/paginas/producto.html?id=" + producto.id);
		};
		
		self.cargar();
	};

	function Producto() {
		var self = this;
		self.id = "";
		self.descripcion = "";
		self.subgrupo = 0;
	};

	var productoModelo = new ListaProducto();
	ko.applyBindings(productoModelo, document.getElementById("listaProductoForm"));
</script>